<template>
  <div>
    <panel :bodyHeight="600" title="已处理" bodyPadding="0px 0px">
      <vxe-table
        border
        resizable
        show-overform
        row-id="id"
        size="small"
        :loading="loading"
        :data="tableData"
      >
        <vxe-table-column width="50px" type="seq"></vxe-table-column>
        <vxe-table-column show-overflow min-width="80px" title="标题">
          <template v-slot="{ row }">
            <a @click="jumpDetail(row)">{{ row.title }}</a>
          </template>
        </vxe-table-column>
        <vxe-table-column
          min-width="80px"
          field="stepName"
          title="步骤"
        ></vxe-table-column>
        <vxe-table-column
          min-width="80px"
          field="creatorTime"
          title="发送时间"
          :formatter="formatDateTime"
        ></vxe-table-column>
        <vxe-table-column
          min-width="80px"
          field="creatorName"
          title="发送人"
        ></vxe-table-column>
        <vxe-table-column min-width="80px" title="状态">
          <template v-slot="{ row }">
            <span v-if="row.state === 2" class="red">● 故障</span>
            <span v-else-if="row.state === 5" class="waring">● 异常</span>
            <span v-else class="green">● 正常</span>
          </template>
        </vxe-table-column>
        <vxe-table-column
          min-width="80px"
          field="note"
          title="备注"
        ></vxe-table-column>

        <vxe-table-column
          min-width="80px"
          align="center"
          title="操作"
          fixed="right"
        >
          <template v-slot="{ row }">
            <a @click="jumpDetail(row)">查看详细</a>
          </template>
        </vxe-table-column>
      </vxe-table>
      <vxe-pager
        background
        size="small"
        :loading="loading"
        :current-page="tablePage.currentPage"
        :page-size="tablePage.pageSize"
        :total="tablePage.totalResult"
        :layouts="[
          'PrevPage',
          'JumpNumber',
          'NextPage',
          'FullJump',
          'Sizes',
          'Total',
        ]"
        @page-change="handlePageChange"
      ></vxe-pager>
    </panel>
  </div>
</template>
<script>
  import { Getdonepagelist } from '@/api/flowtask/api'
  import { formatDateTime } from '@/utils/public/tableformat'
  export default {
    name: 'Processed',
    data() {
      return {
        loading: false,
        tableData: [],
        tablePage: {
          currentPage: 1,
          pageSize: 10,
          totalResult: 0,
        },
      }
    },

    created() {
      this.getData()
    },
    methods: {
      formatDateTime,
      getData() {
        this.loading = true
        const queryData = {
          SkipCount: this.tablePage.currentPage,
          MaxResultCount: this.tablePage.pageSize,
        }

        Getdonepagelist(queryData).then((res) => {
          if (res.isSuccess) {
            this.tableData = res.content.items
            this.tablePage.totalResult = res.content.totalCount
            this.loading = false
          } else {
            console.log('error', res)
            this.$message.error('请求出错了，请刷新重试')
          }
        })
      },

      // 跳转此流程列表
      jumpDetail(row) {
        // console.log(row)
        this.$router
          .push({
            path: '/workbench/detailed',
            query: {
              flowId: row.flowId,
              taskId: row.id,
              groupId: row.groupId,
              tabTitle: row.title,
            },
          })
          .catch((err) => {
            console.log(err)
          })
      },

      // table翻页事件
      handlePageChange({ currentPage, pageSize }) {
        this.tablePage.currentPage = currentPage
        this.tablePage.pageSize = pageSize
        this.getData()
      },
      // table翻页事件
    },
  }
</script>

<style scoped>
  .ant-pro-page-header-wrap-children-content {
    margin: 0px 24px;
  }
</style>
